<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="origin" />
    <meta
      name="viewport"
      content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <title>支付完成</title>
    <script
      type="text/javascript"
      charset="UTF-8"
      src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"
    ></script>

    <script
      type="text/javascript"
      src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"
    ></script>

    <style>
      body {
        font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
      }

      .order_box {
        text-align: center;
      }

      .b_name {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        margin-top: 6px;
      }

      .col_box {
        margin-top: 35px;
      }

      .col_box .col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
        margin-bottom: 14px;
      }

      .btns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        margin-top: 31px;
      }

      .btns .btn {
        width: 147px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        border-radius: 39px;
        border: 1px solid #2352f4;
        box-sizing: border-box;
        color: #2352f4;
        margin: 0px auto;
      }
    </style>
  </head>

  <body>
    <div class="order_box">
      <div class="b_name" id="b_name" style="margin-top: 35px; font-size: 25px">
        汇友互助
      </div>
      <div class="col_box">
        <div class="col">
          <div class="lab" style="width: 400px">支付完成</div>
        </div>
      </div>
      <div class="btns">
        <div id="backHome" class="btn home" onclick="back()">返回</div>
      </div>
    </div>
    <script>
      function init() {
        //初始化小票
        var initData = {
          action: "onIframeReady",
          displayStyle: "SHOW_CUSTOM_PAGE",
        };
        var initPostData = JSON.stringify(initData);
        parent.postMessage(initPostData, "https://payapp.weixin.qq.com");

        console.log("初始化");
      }
      init();

      /**
       * 从URL中提取id参数（适配H5路由、哈希模式、多参数等情况）
       * @param {string} url - 可选，默认取当前页面的URL（window.location.href）
       * @returns {number|null} - 返回id的数字形式，未找到则返回null
       */
      function extractIdFromUrl(url = window.location.href) {
        // 处理哈希路由（如 /#/path?id=123）
        const hashIndex = url.indexOf("#");
        const queryPart = hashIndex > -1 ? url.slice(hashIndex) : url;

        // 用正则匹配 id=数字（适配 ?id=123 或 &id=456）
        const idMatch = queryPart.match(/(?:[?&]id=)(\d+)/);
        return idMatch ? parseInt(idMatch[1], 10) : null;
      }

      //注册点击事件(去首页)
      var homeLink = "https://h5.qunxinghuzhu.com/h5/"; //首页（例子）
      function back() {
        var mchData = {
          action: "jumpOut",
          jumpOutUrl: homeLink, //跳转的页面
        };
        var postData = JSON.stringify(mchData);
        parent.postMessage(postData, "https://payapp.weixin.qq.com");
        console.log("首页");
      }
    </script>
  </body>
</html>
